Les Images

Au dela de l'aspect purement décoratif, les images permettent de donner une identité visuelle au site (avec le logo du site) et peuvent même constituer le centre de l'information.

Les formats d'images

Si les pages Web sont parfois longues à charger, ce n'est pas parce qu'elles contiennent beaucoup de texte mais plutôt à cause des images. Par exemple, une simple photo de 120Ko correspond à 120000 caractères, soit environ 24000 mots ! L'on comprend par conséquent pourquoi le poids des images a tant d'importance sur le Web.

Les 3 principaux formats que l'on utilise sur le Web sont :

• JPEG ;
• GIF ;
• PNG.

Chacun a ses avantages et ses défauts. Nous allons apprendre à reconnaitre le format le plus approprié selon le type d'image que l'on veut diffuser (photo, graphique, capture d'écran...).

Les JPEG

Les images au format JPEG (Joint Photographic Expert Group) sont très répandues. Elles sont en particulier adaptées pour les photos, c'est à dire les images comportant beaucoup de couleurs différentes.
En général il faut éviter d'enregistrer en JPEG des images possédant peu de couleurs différentes (cas des captures d'écrans) car l'image risque d'être sale par endroits.
De plus le format JPEG détériore lègérement la qualité de l'image pour parvenir à réduire son poids.

Une photo prise au format JPEG

Les PNG

Le format d'image PNG (Portable Network Graphics) est assez récent. Contrairement au JPEG, il compresse l'image sans en détériorer la qualité. On peut enregistrer indifféremment des images avec peu ou beaucoup de couleurs, bien que le format JPEG reste le plus impliqué pour les photos.
Le format PNG est libre de droit, contrairement au GIF qui est soumis à un brevet. Il a d'ailleurs justement été crée pour offrir une alternative à ce format.
Il existe plusieurs type d'images PNG. Chacun de ces types permet d'enregistrer plus ou moins de couleurs différentes dans la même image.

On distingue généralement deux types :

• Les PNG 8 bits : Ce format d'image peut stocker jusqu'à 256 couleurs différentes. Il est donc adapté pour des images possédant très peu de couleurs (images en noir et blanc, petits logos...). De plus ces images peuvent être rendues transparentes.
• Les PNG 24 bits : Ce format supporte plusieurs millions de couleurs à la fois (16 777 216 pour être précis). On peut donc sauvegarder des images très riches en couleurs, notamment des photos. Toutefois il est recommandé d'utiliser le JPEG pour les photos car la compression est plus efficace pour ce type d'image. Enfin les images peuvent être rendues translucides

Une image PNG 8 bits

Une image au format PNG 24 bits translucide

Les GIF

Le format GIF (Graphics Interchange Format) est très répandu sur le Web car c'est un format qui existe depuis longtemps.
Contrairement aux PNG, les GIF ne peuvent pas contenir plus de 256 couleurs ce qui les rends inutilisables pour les photos. Ils peuvent être rendus transparents mais ne proposent pas autant d'options de transparence que les PNG. Il est donc aujourd'hui recommandé d'utiliser les PNG dans la mesure du possible.
Les GIF ont cependant encore un atout que les autres formats n'ont pas ils peuvent être animés.
Le format GIF reste donc adapté aux images contenant peu de couleurs, mais son concurrent direct, le PNG 8 bits, compresse généralement mieux les images. On préférera donc utiliser les PNG autant que possible.

Une image GIF animée

Insérer une image dans une page

Nous avons vu quels étaient les principaux formats d'images adaptés au Web. Il est temps maintenant de retourner au code XHTML pour découvrir la balise permettant d'insérer une image dans notre page Web.

La balise d'image

Comment insérer une image dans une page Web ? Grâce à la balise <img />, qui est auto-fermante comme l'on peut le voir. Cette balise doit être insérée dans un paragraphe (<p> </p>), elle ne peut pas être placée à l'éxtérieur.

Cette balise requiert obligatoirement deux attributs :

• src : Précise le chemin vers l'image que l'on veut afficher.
• alt : Cet attribut permet d'indiquer un texte de remplacement pour notre image. Ce texte sera affichée à la place de l'image si celle-ci ne peut pas être affichée.

Voici un exemple d'utilisation de <img /> :

Or, nous savons que cette balise doit être placée à l'intérieur d'un paragraphe. Voici un code plus complet respectant cette règle.

Exemple

Ajouter une infobulle

Il est possible d'ajouter une infobulle qui s'affiche lorsqu'on pointe sur l'image, comme on l'avait fait pour les liens. Cela permet par exemple de donner au visiteur une information supplémentaire sur l'image qu'il est en train de consulter.

L'attribut à utiliser est en fait le même (et il fonctionne d'ailleurs sur un grand nombre de balises) : il s'agit de title.
Voici un exemple d'utilisation :

Exemple

Si l'on pointe avec la souris sur l'image, le titre de l'image s'affiche.

Créer une image cliquable

Un lien ne se présente pas obligatoirement sous la forme d'un texte. On peut aussi transformer une image en lien et réaliser ce qu'on appelle une image cliquable. Le curseur de la souris se transformera alors en une main lorsqu'on pointera sur l'image, indiquant ainsi à l'internaute que l'image est un lien.
Pour faire cela il suffit simplement de combiner les balises <a> et <img />

Exemple

Voir la partie sur les Listes à puces.